<template>
  <div id="samstoSpecboxList">
    <div class="bodyContent">
      <div class='area'>
        <el-page-header :icon="null" title='位置：'>
          <template #content>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                仓库
              </el-breadcrumb-item>
              <el-breadcrumb-item>
                区域
              </el-breadcrumb-item>
              <el-breadcrumb-item>冰箱</el-breadcrumb-item>
            </el-breadcrumb>
          </template>
        </el-page-header>
        <div class="tableBox">
          <el-container>
            <el-header id='boxHeader'></el-header>
            <el-main class='boxmain'>
              <el-container>
                <el-aside width="21px">第一层</el-aside>
                <el-main>
                  <el-row>
                    <el-col :span="6" >
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                  </el-row>
                </el-main>
              </el-container>
            </el-main>
            <el-main class='boxmain'>
            <el-container>
            <el-aside width="21px">第二层</el-aside>
            <el-main >
              <el-row>
                <el-col :span="6" >
                  <el-button type="">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
              </el-row>
            </el-main>
            </el-container>
            </el-main>
            <el-main class='boxmain'>
            <el-container>
            <el-aside width="21px">第三层</el-aside>
            <el-main >
              <el-row>
                <el-col :span="6" >
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
              </el-row>
            </el-main>
            </el-container>
            </el-main>
            <el-main class='boxmain'>
            <el-container>
            <el-aside width="21px">第四层</el-aside>
            <el-main >
              <el-row>
                <el-col :span="6" >
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
              </el-row>
            </el-main>
            </el-container>
            </el-main>
            <el-footer id='boxFooter'></el-footer>
          </el-container>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { reactive, ref, getCurrentInstance, onMounted, watch, PropType } from 'vue';
import { VxeColumnPropTypes, VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance} from 'vxe-table';
import { AppStore } from '@/stores/store';
import SamstoSpecboxForm from "../form/SamstoSpecboxForm.vue";
import {  IsEmpty,getAssetsFile } from '@/utils/common';
import {
  samstoSpecboxPagelist,
  samstoSpecboxDelete
} from '@/views/lab_sys/samsto_set/apis/samsto_api';
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '' }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const tableHard = reactive(["#","A","B","C","D","E","F","G","H","I"]); //表格数据
const curSelectRow = ref({});
const pCurSelectRow = ref({});
const asknDicts = reactive([]);
const isPageDisabled = ref(true);
let tableHeight = ref(window.innerHeight - 235);
const drawer = ref(false)
// 右侧表单:
const samstoSpecboxFormRef = ref<InstanceType<typeof SamstoSpecboxForm>>(); //基本信息表单标记ref
const activeName = ref('infoForm');
const infoTabPaneDisabled = ref(true);

</script>
<style lang="scss" scoped>
#samstoSpecboxList {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .hand-cursor {
      cursor: pointer; /* 鼠标指针在元素上时显示为手指形状 */
    }
    .area {
      background-color: $base-white;
      width: calc(100%);
      height: calc(110%);
      display: inline-block;
      overflow: scroll;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBox {
        height: calc(100% - 40px);
      }
      .el-tabs {
        border: none;
        height: 100%;
        :deep(.el-tabs__content) {
          padding:0;
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
          #pane-0 {
            padding:15px;
            height:calc(100% - 30px);
          }
        }
      }
    }
    .bankItemContent{
      min-height: 600px;
      border-radius: 10px;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
  #boxHeader
  {
    border-color: #bfb8b8;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:none;
    border-left-style:solid;
    background-color: #bfb8b8 !important;
    height: 8px !important;
  }
  .boxmain
  {
    border-color: #bfb8b8;
    border-top-style:solid;
    border-right-style:solid;
    border-left-style:solid;
    .el-button{
      margin: 3px;
    }
  }
  #boxFooter
  {
    border-color: #bfb8b8;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid ;
    border-left-style:solid;
    background-color:#bfb8b8 !important;
    height: 8px !important;
  }
  .el-aside {
    background-color: #ffffff !important;
    color: #22c3dc;
    font-weight: bolder;
    text-align: center;
  }
}
</style>

